@charset "utf-8";

.base-layout {
  display: flex;
  height: 100%;
  overflow-x: hidden;

  .__vuescroll, .__panel, .__view {
    position: static !important;
  }

  .__rail-is-vertical {
    right: 0 !important;
  }

  .layout-menu-p {
    height: 100vh;
    position: relative;
    background-color: rgb(42, 63, 84);
  }

  .layout-menu {
    width: 202px;
    transition: width .5s;
    height: 100vh;

    .el-menu {
      border-right: none;
    }

    svg {
      margin-right: 4px;
      width: 24px;
      text-align: center;
    }

    i {
      color: #ffffff;
    }
  }

  .layout-menu-ls {
    height: 100vh;
  }

  .layout-content {
    width: calc(100% - 202px);
    transition: width .5s;
    display: flex;
    flex-direction: column;
    background-color: #fbfbfb;

    .header-component {
      height: 100%;
      display: flex;
      justify-content: space-between;
      background-color: #fff;
      border-bottom: 1px solid #e7eaec;

      .item {
        padding: 0 10px;

        i {
          cursor: pointer;
        }

        .el-icon-full-screen {
          font-weight: bold;
        }
      }

      .item:hover {
        > i {
          color: #409EFF;
        }
      }
    }

    .l-left {
      display: flex;
      align-items: center;
      padding: 0 10px;

      i {
        font-size: 20px;
        cursor: pointer;
        margin: 0 4px;
      }
    }

    .l-right {
      display: flex;
      align-items: center;

      .avatar {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-right: 6px;
      }

      .el-dropdown {
        display: flex;
        align-items: center;
      }

      .el-dropdown-link {
        display: flex;
        align-items: center;
      }
    }


    .action-more {

      border-left: 1px solid #eeeeee;
      display: flex;
      align-items: center;
      height: 100%;
      padding: 0 10px;
      cursor: pointer;
      width: 52px;
      justify-content: center;

      .el-icon-more {
        color: #696969;
      }
    }
  }

  .layout-content-collapse {
    width: calc(100% - 64px);
  }

  .layout-header {
    height: 58px;
    z-index: 1;
    min-height: 58px;
  }

  .el-menu--collapse {
    .el-submenu__title {
      .children-title {
        display: none;

        + i {
          display: none;
        }
      }
    }

  }

  .layout-menu-collapse {
    width: 64px;
  }

  .change-menu-collapse {
    i {
      color: #999999;
      position: relative;
      top: 1px;
    }
  }

  .route-breadcrumb {
    display: flex;
    align-items: center;
    margin-left: 8px;
    opacity: .6;
  }

  .change-menu-collapse:hover {
    i {
      color: #409EFF;
    }
  }

  .layout-body {
    height: 100%;
    //padding: 15px;
    //position: relative;
  }

  $tags-height: 26px;

  .layout-page-tags {
    height: $tags-height;
    min-height: $tags-height;
    box-shadow: 5px 4px 6px 0 rgba(58, 58, 58, 0.1);
    z-index: 10;

    > div {
      height: 100%;
    }

    .__vuescroll {
      height: 100%;
      position: relative !important;

      .__rail-is-horizontal {
        bottom: -1px !important;
        height: 5px !important;
      }
    }
  }

  .tags-right-action {

    background-color: rgba(0, 0, 0, 0);

    z-index: 1;

    .el-card__body {
      padding: 0px;
    }

    .tags-right-action-menu {
      position: fixed;
      width: 170px;
      z-index: 13;
    }

    .item {
      height: 30px;
      display: flex;
      align-items: center;
      padding: 0 12px;
      cursor: pointer;

      span {
        display: flex;
        align-items: center;

        height: 100%;
        font-size: 12px;
      }

      span:nth-child(1) {
        width: 28px;
        border-right: 1px solid #ccc;
      }

      span:nth-child(2) {
        padding-left: 10px;
      }
    }

    .disable {
      color: #999;
      cursor: no-drop;
    }

    .line {
      width: 100%;
      height: 1px;
      background-color: #ccc;
      margin-left: 39px;
    }

    .item:hover {
      background-color: #f1f1f1;
    }
  }

  .tags-list {

    width: 100%;
    height: $tags-height;
    display: -webkit-box;
    background-color: #fff;
    align-items: center;
    position: relative;
    //z-index: 12;

    .item {
      height: 100%;
      padding: 2px 10px 2px 14px;
      cursor: pointer;
      border-left: 1px solid #f7f7f7;
      display: flex;
      align-items: center;
      justify-content: center;
      user-select: none;
      transition: all .3s linear;

      span {
        font-size: 12px;
        color: #999;
        line-height: 0;
      }

      .el-icon-close {
        position: relative;
        left: 2px;
        color: #999;
        font-size: 12px;
      }

    }

    .item i:hover {
      color: #409EFF;
    }

    .item:hover {
      background-color: #2a3f54;

      span {
        color: #fff;

      }
    }

    .active {
      background-color: #2a3f54;
      position: relative;

      .el-icon-close {
        color: #fff;
      }

      span {
        color: #fff;
      }
    }

  }

  .layout-body {
    overflow-y: auto;
  }

  .home-page-body {
    height: calc(100vh - (58px + 0px));
  }

  .logo {
    height: 58px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      max-height: 100%;
      max-width: 100%;
    }
  }

  .exist-logo {
    .layout-menu-ls {
      height: auto;
    }
  }

  .fixed-logo {
    .layout-menu-ls {
      height: 100vh;
      padding-top: 58px;
    }
  }

  .fixed-logo {
    .logo {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
    }
  }

  .el-menu-item.is-active {
    background-color: rgba(32, 48, 66, 0.88) !important;
  }

  .route-item {
    overflow: auto;
    max-height: 100%;
    height: 100%;
    overflow-x: hidden;

    > * {
      height: 100%;
    }
  }

  .layout-auto-header {
    overflow-y: auto;

    .layout-body {
      height: auto;
      overflow-y: visible;
    }
  }
  .menu-loading{
    width: 100%;
    height: 100%;
  }
}

.page-list-empty {
  height: 100%;
  padding: 30px;
}

